<script setup>

import {Lock} from '@element-plus/icons-vue'
import {ref} from 'vue'
const passwordModel = ref({
    old_pwd :'',
    new_pwd : '',
    re_pwd :''
});

//自定义校验标准函数
const checkRePassword = (rule,value,callback) =>{
    if(value === ''){
        //回调函数，执行回调函数中的代码
        callback(new Error('请输入确认密码'));
    }else if (value !== passwordModel.value.new_pwd){
        callback(new Error('请确保两次密码一致'));
    }else{
        callback();
    }
}

//表单数据校验
const rules = {
    old_pwd:[
        //校验规则，校验错误提示信息，校验触发时机
        {required:true,message:'请输入原密码',trigger:'blur'},
        {min:5,max:16,message:'密码长度为5-16位',trigger:'blur'}
        ],
    new_pwd:[
        {required:true,message:'请输入密码',trigger:"blur"},
        {min:5,max:16,message:'控制密码长度为5-16',trigger:'blur'}
    ],
    re_pwd:[
        {validator:checkRePassword,trigger:'blur'}
    ]


}
import {userPasswordUpdateService} from '@/api/user.js'
const onSubmit = async() => {
   let result = await userPasswordUpdateService(passwordModel.value);
   location.reload();
}
</script>
<template>
  <el-card class="box-card">
        <template #header>
      <div class="header">
        <span>重置密码</span>
      </div>
    </template>
    <el-form :inline="true" :model="passwordModel" class="demo-form-inline" :rules="rules">
    <h4>原密码</h4>
    <el-form-item prop="old_pwd" >
      <el-input :prefix-icon="Lock" v-model="passwordModel.old_pwd" placeholder="请输入当前密码" type="password" clearable />
    </el-form-item>
    <h4>新密码</h4>
    <el-form-item  prop="new_pwd">
      <el-input :prefix-icon="Lock" v-model="passwordModel.new_pwd" placeholder="请输入新密码" type="password" clearable />
    </el-form-item><br>
    <h4>确认密码</h4>
    <el-form-item prop="re_pwd">
      <el-input :prefix-icon="Lock" v-model="passwordModel.re_pwd" placeholder="确认密码和新密码保持一致" type="password" clearable />
    </el-form-item><br>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交修改</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</template>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
h4 {
    margin-top: 0;
    margin-bottom: 0;
}
</style>